//当鼠标移入得时候jqzoom得时候显示出focus和大图
$(function() {
    class Magnifier {
        constructor() {
            this.jqzoom_ele = $(".jqzoom");
            this.jqzoom_img = $(".jqzoom img");
            this.big_img_ele = $(".big-img");
            this.big_img = $(".big-img img");
            this.focus_ele = $(".focus");
            this.preview_ele = $(".preview");
            this.preview_offset = this.preview_ele.offset();
            //获得盒子的宽高
            this.focus_size = {
                width: this.focus_ele.width(),
                height: this.focus_ele.height()
            }

        }
        bindEvent() {
            let mag = this;
            // console.log(mag);
            this.jqzoom_ele.mouseover(function() {
                mag.toggle("show");
                // console.log(1);
            });
            this.jqzoom_ele.mouseout(function() {
                mag.toggle("hide");
            });
            //当鼠标在上面移动得时候focus在上面移动

            this.jqzoom_ele.mousemove(function(e = event) {
                mag.focusMove(e.clientX, e.clientY);
                mag.bigImgMove();
            });

            $('#spec-list li img').mouseover(function() {
                // mag.handlerToggle();
                $(".jqzoom  img").attr('src', this.src)
                $(".big-img img").attr('src', $(".jqzoom  img")[0].src)
                $(this).css("border", "3px solid red")
            });
            $('#spec-list li img').mouseout(function() {

                $(this).css("border", "3px solid #ddd")
            });

        }


        toggle(type) {
            switch (type) {
                case "show":
                    this.big_img_ele.show();
                    this.focus_ele.show();
                    break;
                case "hide":
                    this.big_img_ele.hide();
                    this.focus_ele.hide();
                    break;

            }
        }

        focusMove(x, y) {
            let _left = x - this.focus_size.width / 2 - this.preview_offset.left / 2;
            let _top = y - this.focus_size.height / 2 - this.preview_offset.top / 2;
            _left = _left < 0 ? 0 : _left;
            _left = _left > 200 ? 200 : _left;
            _top = _top < 0 ? 0 : _top;
            _top = _top > 250 ? 250 : _top;

            this.focus_ele.css({
                left: _left,
                top: _top
            });

            //计算比例
            this.prop_left = _left / 200;
            this.prop_top = _top / 200;

        }

        bigImgMove() {
            this.big_img.css({
                left: -this.prop_left * 300,
                top: -this.prop_top * 300
            })
        }




    }
    let m = new Magnifier();
    m.bindEvent();
})